<!-- * 文件名：首页
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2025-3-8  -->
<template>
    <view class="home">
        <view class="contentTop">
            <view class="contentTopTitle">用电减免计划</view>
            <image :src="getUrl('/homeTop.png')" mode=""></image>
            <view class="contentTopLinks">
                <view class="contentTopBtn" @click="handleRuleShow">活动规则></view>
                <view class="intro" v-if="leaderStatus == '1' || leaderStatus == '2'" @click="handleIntro">
                    交易流程介绍</view>
            </view>
            <view class="contentBox" v-if="leaderStatus == '1' || leaderStatus == '2'">
                <view class="contentBoxTop">{{highlights}}</view>
                <view class="contentBoxBottom">
                    <view class="tabs">
                        <view :class="activeTab === 0 ? 'tab active' : 'tab'" @click="switchTab(0)">安卓
                        </view>
                        <view :class="activeTab === 1 ? 'tab active' : 'tab'" @click="switchTab(1)">鸿蒙</view>
                        <view :class="activeTab === 2 ? 'tab active' : 'tab'" @click="switchTab(2)">苹果</view>
                    </view>
                    <image v-if="activeTab === 0" :src="getUrl('/QRcode.png')" mode="" :show-menu-by-longpress="true">
                    </image>
                    <image v-if="activeTab === 1" :src="getUrl('/HOS_QR.png')" mode="" :show-menu-by-longpress="true">
                    </image>
                    <image v-if="activeTab === 2" :src="getUrl('/iOS_QR.png')" mode="" :show-menu-by-longpress="true">
                    </image>
                    <view class="contentBoxBottomText">电网APP</view>
                </view>
            </view>
            <view class="phone" v-if="leaderStatus !== '1'">
                <view class="phoneLeft">
                    <u-input v-model="phone" type="text" placeholder="输入手机号" placeholder-style="color: #A3A3A3" />
                </view>
                <view class="phoneRight" @click="handleToPartner">加入计划</view>
            </view>
            <view class="way">
                <view class="wayTop">参与方式</view>
                <view class="wayBottom">
                    <view class="line"></view>
                    <view class="nums">
                        <view class="num">1</view>
                        <view class="num">2</view>
                        <view class="num">3</view>
                    </view>
                    <view class="wayTexts">
                        <view class="wayText">加入计划</view>
                        <view class="wayText">登录电网APP</view>
                        <view class="wayText">获得奖励</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- <view class="shopping" @click="toShopping">
			<image src="@/static/shopping.png" mode=""></image>
			<view class="shoppingText">商城</view>
		</view> -->

        <l-popup v-model="popupShow" :maskClickAble="true" :isShowClose="true">
            <view class="errorPopup">{{content}}</view>
        </l-popup>

        <tabfooter :active='1'></tabfooter>
    </view>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { onShow, onLoad } from "@dcloudio/uni-app"
    import topbar from '@/components/topbar/index.vue'
    import lPopup from '@/components/l-popup/l-popup.vue';
    import tabfooter from '@/components/footer/index.vue'
    import { useTabbar } from '@/hooks/useTabbar.ts'
    import { getUrl } from '@/utils/imagePlugin'
    import Api from '@/api/modules/home.ts'
    useTabbar()
    let phone = ref<string>('')
    const handleToPartner = () => {
        uni.navigateTo({
            url: '/pages/recruitPartner/recruitPartner?phone=' + phone.value
        })
        // uni.navigateTo({
        // 	url: '/pages/htmlPage/htmlPage?url=https://95598.cn/a/'
        // })

    }

    const handleIntro = () => {
        uni.navigateTo({
            url: '/pages/intro/intro'
        })
    }

    let popupShow = ref(false)
    let content = ref<string>('')
    let highlights = ref<string>('')
    const handleRuleShow = () => {
        popupShow.value = true
    }
    const getSettingInfo = () => {
        Api.getSettingInfo().then((res : any) => {
            content.value = res.data.activity
            highlights.value = res.data.activityIntroduction
        })
    }

    let leaderStatus = ref<any>('') // 1合伙人 2团员 ‘’普通
    const getInfo = () => {
        Api.getInfo().then((res : any) => {
            if (res.code === 200) {
                leaderStatus.value = res.user.leaderStatus
            }

        })
    }

    let activeTab = ref<number>(0)
    const switchTab = (num : number) => {
        activeTab.value = num
    }

    const toShopping = () => {
        uni.navigateToMiniProgram({
            appId: 'wxc72b0171ffddb8f7',
            success(res) {
                // 打开成功
            }
        })
    }

    onShow(() => {
        getSettingInfo()
        if (uni.getStorageSync('token')) {
            getInfo()
        }
    })
</script>

<style lang="scss" scoped>
    .home {
        background-color: #5EB847;
        padding-bottom: 180rpx;
        min-height: 100vh;

        .contentTop {
            background: #5EB847;
            padding-bottom: 40rpx;
            text-align: center;

            .contentTopTitle {
                color: #ffffff;
                font-size: 42rpx;
                font-weight: 600;
                padding: 20rpx 0 0;
                text-align: center;
            }

            image {
                width: 694rpx;
                height: 384rpx;
            }

            .contentTopLinks {
                display: flex;
                justify-content: space-around;

                .contentTopBtn {
                    color: #ffffff;
                    font-size: 28rpx;
                    text-decoration: underline;
                    margin-bottom: 20rpx;
                    text-align: center;
                }

                .intro {
                    color: #ffffff;
                    font-size: 28rpx;
                    text-decoration: underline;
                    margin-bottom: 20rpx;
                    text-align: center;
                }
            }

            .contentBox {
                background: #ffffff;
                border-radius: 24rpx;
                margin: 0 32rpx;
                height: 600rpx;
                display: flex;
                flex-direction: column;

                .contentBoxTop {
                    border-bottom: 1rpx solid #1FBF55;
                    padding: 10rpx 0;
                    text-align: center;
                    font-size: 32rpx;
                }

                .contentBoxBottom {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .tabs {
                        width: 100%;
                        display: flex;
                        justify-content: space-around;

                        .tab {
                            padding: 10rpx 0;
                            text-align: center;
                            font-size: 32rpx;
                        }

                        .active {
                            font-weight: bold;
                            border-bottom: 1rpx solid #1FBF55;
                        }
                    }

                    image {
                        width: 400rpx;
                        height: 400rpx;
                    }

                    .contentBoxBottomText {
                        margin-top: 10rpx;
                    }
                }
            }

            .phone {
                display: flex;
                margin: 24rpx 32rpx;

                .phoneLeft {
                    background: #ffffff;
                    border-radius: 100rpx;
                    padding: 0 20rpx;
                    flex: 1;
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .phoneRight {
                    margin-left: 20rpx;
                    width: 200rpx;
                    display: flex;
                    border: 1rpx solid #ffffff;
                    background: #1FBF55;
                    border-radius: 100rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffffff;
                }
            }

            .way {
                background: #ffffff;
                border-radius: 24rpx;
                margin: 0 32rpx;
                display: flex;
                flex-direction: column;

                .wayTop {
                    border-bottom: 1rpx solid #1FBF55;
                    padding: 20rpx;
                    font-size: 32rpx;
                }

                .wayBottom {
                    position: relative;
                    margin-bottom: 30rpx;

                    .line {
                        height: 8rpx;
                        width: 520rpx;
                        background: #ccc;
                        position: absolute;
                        top: 60rpx;
                        left: 68rpx;
                    }

                    .nums {
                        display: flex;
                        justify-content: space-between;
                        z-index: 600;
                        position: absolute;
                        width: 570rpx;
                        left: 60rpx;
                        top: 34rpx;

                        .num {
                            width: 60rpx;
                            height: 60rpx;
                            background: #1FBF55;
                            border-radius: 100rpx;
                            color: #ffffff;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }

                    .wayTexts {
                        display: flex;
                        justify-content: space-between;
                        margin: 120rpx 32rpx 0;

                        .wayText {
                            font-size: 28rpx;
                        }
                    }
                }
            }
        }

        .shopping {
            width: 100rpx;
            // height: 100rpx;
            position: fixed;
            // left: 50%;
            // transform: translateX(-50%);
            bottom: 20rpx;
            right: 20rpx;
            z-index: 2000;
            background-color: #ffffff;
            border: 1rpx solid #ccc;
            border-radius: 10rpx;
            box-shadow: 4rpx 4rpx 4rpx #ccc;

            image {
                width: 100rpx;
                height: 100rpx;
            }

            .shoppingText {
                text-align: center;
                font-size: 32rpx;
            }
        }
    }
</style>